<template>
  <div @click.stop class="dict-selector__container">
    <div class="selector__text">筛选</div>
    <select class="column-dict-selector" v-model="selectVal" @change="handleSelectChange">
      <option class="option-item" v-for="option in dictOptions" :key="option.value" :value="option.value">
        {{option.text}}
      </option>
    </select>
  </div>
</template>

<script>
  // import { ajaxGetDictItems, getDictItemsFromCache } from '@/api/api'
  export default {
    name: 'DictSelector',
    props: {
      dictCode: {
        type: String,
        require: true
      },
      field: {
        type: String,
        require: true
      }
    },
    data() {
      return {
        dictOptions: [],
        selectVal: ''
      }
    },
    created() {
      this.initDictData()
    },
    methods: {
      clearData() {
        this.selectVal = ''
      },
      // 初始化字典
      initDictData() {
        // if(getDictItemsFromCache(this.dictCode)){
        //   this.dictOptions = getDictItemsFromCache(this.dictCode);
        //   return
        // }
        // ajaxGetDictItems(this.dictCode, null).then((res) => {
        //   if (res.success) {
        //     this.dictOptions = res.result;
        //   }
        // })
      },
      handleSelectChange() {
        this.$emit('filterChange', {
          rule: "eq",
          type: "string",
          dictCode: this.dictCode,
          field: this.field,
          val: this.selectVal
        })
      }
    }
  }
</script>

<style>
.dict-selector__container {
  display: flex;
}
.selector__text {
  padding-right: 5px;
  white-space: nowrap;
}
.column-dict-selector {
  flex-grow: 1;
  outline: none;
  border: 1px solid #aaa;
}
.option-item {
  cursor: pointer;
}
</style>